.navbar {
  width: 100%;
  background-color: #e54847;
  height: .515rem; }
  .navbar .nav-header {
    width: 100%;
    line-height: .515rem;
    color: #fff;
    font-size: .18rem;
    font-weight: 400;
    text-align: center; }

.download-header {
  background: #fff;
  height: .6rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e8e8e8; }
  .download-header .logo-img {
    margin-left: .11rem;
    margin-right: .06rem;
    min-width: .42rem;
    height: .42rem;
    background: url(https://p0.meituan.net/moviemachine/08d3ecf9c6fa9964c85d1f23b8d8fcb87541.png) no-repeat;
    background-size: contain; }
  .download-header .info-wrapper {
    flex-grow: 1; }
    .download-header .info-wrapper .title {
      font-size: .15rem;
      color: #333;
      line-height: .23rem;
      margin-bottom: 1px;
      font-weight: 600; }
    .download-header .info-wrapper .content {
      font-size: .11rem;
      color: #666;
      letter-spacing: 0; }
  .download-header .link-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: .96rem;
    height: .42rem;
    margin-right: .06rem;
    border-radius: .22rem;
    background: #f03d37;
    color: #fff;
    font-size: .13rem; }
  .download-header .link-btn:after {
    content: "";
    width: .19rem;
    height: .19rem;
    margin-left: .05rem;
    background: url(http://p0.meituan.net/moviemachine/89857785f50685578fa61e1883251da95640.png) no-repeat;
    background-size: contain;
    animation: changeScale 3s ease-in-out infinite; }

.topbar {
  border-bottom: 1px solid #e6e6e6;
  height: .44rem;
  display: block; }
  .topbar .topbar-bg {
    display: flex;
    align-items: center;
    height: .44rem;
    justify-content: space-between; }
    .topbar .topbar-bg .city-entry {
      padding-left: .15rem;
      font-size: .15rem;
      color: #666;
      display: flex;
      align-items: center; }
      .topbar .topbar-bg .city-entry .city-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: .70rem;
        max-width: 19.2vw; }
      .topbar .topbar-bg .city-entry .city-entry-arrow {
        width: 0;
        height: 0;
        border: .04rem solid #b0b0b0;
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        display: inline-block;
        margin-left: .04rem;
        margin-top: .05rem; }
    .topbar .topbar-bg .switch-hot {
      display: flex;
      height: .44rem;
      line-height: .44rem;
      position: relative; }
    .topbar .topbar-bg .hot-item {
      font-size: .15rem;
      color: #666;
      width: .80rem;
      width: 21.33333vw;
      text-align: center;
      margin: 0 .12rem;
      font-weight: 700; }
    .topbar .topbar-bg .hot-item.active {
      color: #ef4238; }
    .topbar .topbar-bg .switch-hot:after {
      content: "";
      display: block;
      position: absolute;
      bottom: -1px;
      width: .80rem;
      width: 21.33333vw;
      height: .02rem;
      background-color: #ef4238;
      transition: left .2s; }
    .topbar .topbar-bg .switch-hot[data-active=".n-hot"]:after {
      left: .12rem;
      left: 3.2vw; }
    .topbar .topbar-bg .search-icon {
      width: .20rem;
      height: .20rem;
      background: url() no-repeat;
      background-size: .20rem;
      padding: .10rem .35rem .10rem .10rem;
      background-position: .10rem; }

.bottom-nav-bar {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #fff;
  border-top: .5px solid #d8d8d8;
  display: flex;
  justify-content: space-around;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom); }
  .bottom-nav-bar .nav-icon-wrapper {
    float: left;
    width: 25px;
    height: .48rem;
    line-height: .48rem;
    box-sizing: border-box;
    color: #f03d37;
    position: relative;
    text-align: center;
    flex: 1; }
    .bottom-nav-bar .nav-icon-wrapper .nav-icons {
      display: block;
      width: .25rem;
      height: .25rem;
      margin: auto;
      background-repeat: no-repeat;
      background-size: .25rem; }
      .bottom-nav-bar .nav-icon-wrapper .nav-icons svg {
        width: .25rem;
        height: .25rem;
        fill: #f03d37; }
      .bottom-nav-bar .nav-icon-wrapper .nav-icons :not(svg) {
        transform-origin: 0px 0px; }
      .bottom-nav-bar .nav-icon-wrapper .nav-icons g {
        fill: dimgray;
        fill-rule: evenodd; }
  .bottom-nav-bar .nav-text {
    line-height: .12rem;
    position: absolute;
    top: .33rem;
    left: 0;
    right: 0;
    font-size: .10rem;
    color: #696969; }
  .bottom-nav-bar .current .nav-text {
    color: #f03d37; }

.bottom-nav-bar .current svg, .bottom-nav-bar .current svg > g path, .bottom-nav-bar .current svg > path {
  fill: #f03d37; }

main {
  overflow: hidden;
  height: 100%;
  padding-bottom: .48rem;
  position: absolute; }
